<template>
    <div>
        <bs4-card>
            <div slot="header" class="row">
                <div class="col-auto mr-auto">新增案件</div>
                <div class="col-auto">
                    <!--<i-button type="primary" size="small" v-on:click="showEditDialog(0)"-->
                    <!--:disabled="stateManager.buttonLoading">添加司法机关人员</i-button>-->
                </div>
            </div>
            <hr>
            <Row type="flex">
                <i-col span="4">
                    <div class="demo-spin-article" >
                        <Steps :current="activeStep" direction="vertical">
                            <Step title="案件相关信息" content="案件基础信息"></Step>
                            <Step title="调查记录" content="调查记录表"></Step>
                            <Step title="调查协议" content="调查协议表"></Step>
                            <Step title="回访" content="回访记录表"></Step>
                            <Step title="完成" content="归档"></Step>
                        </Steps>

                        <Spin fix size="large" v-if="stateManager.refreshList"></Spin>
                    </div>
                </i-col>
                <i-col span="20">
                    <transition name="fade" v-if="loadComplate">
                        <caseStep1 v-if="activeStep===0 "  :stateManager="stateManager" :caseId="caseId" @next="onNext" >
                        </caseStep1>
                        <caseStep2 v-if="activeStep===1" :stateManager="stateManager" :caseId="caseId" @prev="onPrev"   @next="onNext">
                        </caseStep2>
                        <caseStep3 v-if="activeStep===2"  :stateManager="stateManager" :caseId="caseId" @prev="onPrev"  @next="onNext" >
                        </caseStep3>
                        <caseStep4 v-if="activeStep===3"  :stateManager="stateManager" :caseId="caseId" @prev="onPrev"   @next="onNext" >
                        </caseStep4>
                        <caseStep5 v-if="activeStep===4"  :stateManager="stateManager" :caseId="caseId"   @next="finishForm" >
                        </caseStep5>
                    </transition>
                </i-col>
            </Row>
        </bs4-card>
    </div>
</template>

<script>
  import caseStep1 from './caseStep1'
  import caseStep2 from './caseStep2'
  import caseStep3 from './caseStep3'
  import caseStep4 from './caseStep4'
  import caseStep5 from './caseStep5'
  export default {
    name: 'caseCreate',
    props: {
      caseId:{
        default: 0
      },
      step: {
        default: 0
      }
    },
    components: {
      'caseStep1':caseStep1,
      'caseStep2':caseStep2,
      'caseStep3':caseStep3,
      'caseStep4':caseStep4,
      'caseStep5':caseStep5,
    },
    data: function () {
      return {
        caseInfo:{},
        activeStep: (Number.parseInt(this.step) - 1) < 0 ? 0 : Number.parseInt(this.step) - 1,
        loadComplate:true,
        stateManager: {
          refreshList: false,
          buttonLoading: false
        }
      }
    },
    mounted : function () {
      this.$store.dispatch('fetchOrganizationList')
      this.$store.dispatch('fetchMediatorList')
      this.activeStep= (Number.parseInt(this.step) - 1) < 0 ? 0 : Number.parseInt(this.step) - 1
      console.log(this.activeStep)
    },
    methods: {
      onNext (payload) {
        if (this.activeStep === 0) {
          this.caseId = payload
        //   ReportApi.getReportById(this.reports.id).then((response) => {
        //     this.reports = response.data.data
        // })
        }
        this.activeStep++
      },
      onPrev (payload) {
        if (this.activeStep === 0) {
            this.caseId=0
        }
        this.activeStep--
      },
      finishForm() {
        this.$store.commit('removeTag', 'case_create');
        // this.$router.push('/case/index')
        this.activeStep === 0
        this.$router.push({name:'case_index',params:{refresh:true}})
      }
    } ,
    watch: {
      'step': function (newValue) {
        this.$store.dispatch('fetchMediatorList')
        this.activeStep= (Number.parseInt(newValue) - 1) < 0 ? 0 : Number.parseInt(newValue) - 1
      }
    }

  }
</script>
<style>
    .steps-list{
        margin: auto;
    }
</style>
